<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>
<style>
    .static {
        width: 150px;
        height: 150px;
        text-align: center;
        line-height: 150px;
        font-size: 24px;
        color: darkmagenta;
        font-weight: bold;
        margin: 10px;
    }

    .a {
        border: 3px solid darkolivegreen;
    }

    .b {
        background: deeppink;
    }

    .c {
        border-radius: 50%;
    }

    .main {
        margin: 20px;
    }

    .nav {
        display: flex;
    }

    .nav-item {
        width: 100px;
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        color: yellowgreen;
        background: palevioletred;
        border-radius: 10px;
        font-size: 14px;
        margin: 10px;
        text-align: center;
    }

    .nav-active {
        background: crimson;
        color: #fff;
    }

    .content-item {
        width: 350px;
        height: 350px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 34px;
        background: crimson;
        color: cyan;
        border-radius: 20px;
        margin: 10px;
    }

    tr td {
        text-align: center;
        border: 1px solid #eee;
    }
</style>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>选中</td>
                    <td>商品名称</td>
                    <td>商品图片</td>
                    <td>商品单价</td>
                    <td>商品数量</td>
                    <td>商品总价</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <template v-if="goods.length>0">
                    <tr v-for='(l,i) in goods' :key='i'>
                        <!-- 这里的key的作用是给每一个都分开 相当于表示符号 方便维护和查找 -->
                        <td>{{i+1}}</td>
                        <td>
                            <input type="checkbox" v-model="l.check">
                        </td>
                        <td>{{l.title}}</td>
                        <td>
                            <img width="100px" src="http://47.104.209.44/base/imgs/1.jpg" alt="">
                        </td>
                        <td>
                            {{l.price}}
                        </td>
                        <td>
                            <input min="1" type="number" v-model.number="l.count">
                        </td>
                        <td>
                            {{l.price * l.count}}
                        </td>
                        <td>
                            <button @click="goods.splice(i,1)">删除</button>
                        </td>
                    </tr>
                </template>
                <tr v-else>
                    <td colspan="8" style="text-align: center; font-size: 32px;">暂无数据,请去添加 </td>
                </tr>
            </tbody>
        </table>
        <div>
            <p>
                <label for="quan">
                    <input type="checkbox" id="quan" v-model="quan">全选/反选
                </label>
            </p>
            <button @click="delCheck">删除选中</button>
            <p>
                选中总金额: {{ checkAmount }} / 选中数量 {{ checkTotal }}
            </p>
            <p>
                总计: {{ amount }}总数量 {{ total}}
            </p>
            <p>
                <button>结算</button>
            </p>
        </div>
    </div>
    <script>
        new Vue({
            data: {
                title: "30行实现购物车",
                goods: [
                    { check: false, title: "上衣", price: 200, count: 10 },
                    { check: true, title: "裤子", price: 100, count: 10 },
                    { check: false, title: "鞋子", price: 500, count: 10 },
                    { check: false, title: "风衣", price: 1000, count: 10 },
                    { check: true, title: "帽子", price: 300, count: 10 },
                    { check: true, title: "西服", price: 2000, count: 10 },
                ],
                total: 0,//总数量
                checkTotal: 0, // 选中数量
                amount: 0, // 总价
                checkAmount: 0 // 选中总价 
            },
            watch: {
                //浅度监听
                //goods(v){
                // console.log(v)
                // }
                //深度监听 监听每一层的数据修改 监听所有的数据修改
                goods: {
                    deep:true,//当用户指定了watch中的deep属性为true时，如果当前监控的值是数组类型。会对对象中的每一项进行求值，此时会将当前watcher存入到对应属性的依赖中，这样数组中对象发生变化时也会通知数据更新
                    handler(v) {
                        console.log(v)
                        this.total = 0;
                        this.amount = 0;
                        this.checkTotal = 0;
                        this.checkAmount = 0;
                        v.forEach(item => {
                            this.total += item.count;
                            this.amount += item.count * item.price;
                            if (item.check) {
                                this.checkTotal += item.count;
                                this.checkAmount += item.count * item.price
                            }
                        })
                    }
                }
            },
            computed: {
                ctotal() {
                    var total = 0;
                    this.goods.forEach((item) => {
                        total += item.count;
                    })
                },
                quan: {
                    get() {
                        return this.goods.every(item => item.check);
                    },
                    set(v) {
                        console.log(v)
                        this.goods = this.goods.map(item => {
                            item.check = v;
                            return item
                        })
                    }
                }
            },
            methods: {
                delCheck() {
                    this.goods = this.goods.filter(item => !item.check)
                }
            },
            mounted() {
                document.getElementsByTagName("title")[0].innerHTML = this.title;
                this.goods.forEach(item => {
                    this.total += item.count;
                    this.amount += item.count * item.price;
                    if (item.check) {
                        this.checkTotal += item.count;
                        this.checkAmount += item.count * item.price;
                    }
                })
            }
        }).$mount('#app');
    </script>
</body>

</html>